@import "./@name";

.my{
  background: @bg;
  &>header{
    padding:0 1em;
    align-items: center;
    display: flex;
    justify-content: space-between;
    height:12em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    &>div{
      align-items: center;
      flex-direction: row;
      display: flex;
      span{
        color: @bg-white;
        font-size: @font-size-t;
        padding-left: 1em;
      }
      &>div{
        border: 5px solid @font-color-gray;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width:60px;
        height:60px;
        border-radius: 50%;
      }
    }
    &>span{
      a{
        p{
          font-size: @font-size-p;
          color: @line;
        }
        i{
          font-size: 1.6em;
          color: @bg-white;
        }
      }
    }
  }
  &>.myOrder1,&>.myWallet1{
    background: @bg-white;
    height:11em;
    &>header{
      h4{
        height:3.5em;
        padding:0 1em;
        border-bottom: 1px solid @line;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &>span{
          font-size: @font-size-t;
        }
        a{
          width:auto;
          align-items: center;
          color: @font-color-gray;
          i{
            font-size: 1.4em;
          }
          span{
            font-size: @font-size-p;
          }
        }
      }
    }
    &>div{
      height:7.5em;
      ul{
        height:100%;
        li{
          position: relative;
          width:25%;
          a, i,p{
            justify-content: center;
            flex-direction: column;
            align-items: center;
            i{
              font-size: 2.2em;
              color: @font-color-gray;
            }
            p{
              font-size: @font-size-p;
            }
          }
          span{
            justify-content: center;
            display: flex;
            color: @bg-white;
            position: absolute;
            width:16px;
            height:16px;
            border-radius: 50%;
            background: @color-main-3;
            right: 2em;
            top:1.5em;
          }
        }
      }
    }
  }
  .myWallet1{
    margin-top:1em ;
    &>div{
      ul{
        li{
          width:33%;
          a{
            i{
            }
            p{
            }
          }
          span{
            right: 3em;
            top:2em;
          }
        }
      }
    }
  }
  .myOther{
    margin-top:1em ;
    background: @bg-white;
    ul{
      flex-wrap: wrap;
      li{
        height:7.5em;
        width:25%;
        a{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          i{
            font-size: 2.2em;
          }
          p{
            font-size: @font-size-p;
          }
        }
      }
      li:nth-of-type(1),li:nth-of-type(2),li:nth-of-type(3),li:nth-of-type(4){
        border-bottom: 1px solid @line;
      }
    }
  }
}

//账号管理
.myAccount{
  display: flex;
  flex-direction: column;
  li{
    background: @bg-white;
    padding:0 1em;
    border-bottom: 1px solid @line;
    justify-content: space-between;
    align-items: center;
    p{
      font-size: @font-size-p;
    }
    input{
      color: @font-color-gray;
      text-align: right;
      font-size: @font-size-p;
    }
  }
  li:nth-of-type(1){
    height:6.5em;
    div{
      width:40px;
      height:40px;
      border-radius: 50%;
      border: 4px solid @line;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
  }
  li:nth-of-type(2),li:nth-of-type(3){
    height:3.8em;
  }
  li:nth-of-type(4){
    margin-top: 1em;
    height:3.8em;
    a{
      width:auto;
      align-items: center;
      span{
        font-size: @font-size-p;
      }
      i{
        font-size: 1.4em;
      }
    }
  }
}

//收货地址
.ShoppingAddress{
  ul{
    flex-direction: column;
    li{
      background: @bg-white;
      flex-direction: column;
      margin-bottom: 1em;
      h4{
        padding:1em 1em 0.5em 1em;
        font-size: @font-size-p;
        span{
          padding-right: 2em;
        }
      }
      p{
        padding:0 1em 0.5em 1em;
        font-size: @font-size-p;
        height:38px;
      }
      &>div{
        border-top: 1px solid @line;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 1em;
        height:3em;
        align-items: center;
        i{font-size: 1.6em}
        span{
          font-size: @font-size-p;
          padding-left: 0.5em;
        }
        &>div{
          align-items: center;
          display: flex;
          flex-direction: row;
          a{
            padding-left: 2em;
            align-items: center;
            i{
              font-size: 1.4em;
            }
            span{
              font-size: @font-size-p;
            }
          }
        }

      }
    }

  }
}

//添加收货地址
.addAddress{
  flex-direction: column;
  background: @bg-white;
  li{
    padding:1em;
    justify-content: space-between;
    border-bottom: 1px solid @line;
    p{
      font-size: @font-size-p;
    }
    input{
      font-size: @font-size-p;
      width:75%;
      color: @font-color-gray;
    }
    textarea{
      font-size: @font-size-p;
      resize: none;
      width:78%;
      line-height: 18px;
      height:auto;
      border: none;
      color: @font-color-gray;
    }
  }
  .addAddress-one{
    input{
      width:82%;
    }
  }
  .addAddress-four{
    padding: 0.4em 1em;
    &>p{
      flex-direction: column;
      &>span{
        font-size: 14.4px;
      }
      &>label{
        font-size: 12px;
        color: @font-color-gray;
      }
    }
    div{
      background: @color-main-1;
      height:28px;
      width:50px;
      border-radius: 20px;
      position: relative;
      span{
        background: @bg-white;
        height: 26px;
        width:26px;
        border-radius: 50%;
        position: absolute;
        left: 1px;
        top:1px;
        &.active{
          left: 23px;
          transition: both .3s;
        }
      }
    }
  }
}

//关注商户
.myConcern{
  flex-direction: column;
  li{
    flex-direction: column;
    background: @bg-white;
    margin-bottom: 1em;
    &>div{
      padding: 1em;
      flex-direction: row;
      display: flex;
      align-items: center;
      div{
        display: flex;
        width:60px;
        height:60px;
        border-radius: 50%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border: 1px solid @line;
      }
      h4{
        padding-left: 1em;
        p{
          font-size:@font-size-p;
        }
        span{
          color: @font-color-gray;
        }
      }
    }
    &>span{
      padding:0.5em 1em;
      border-top: 1px solid @line;
      justify-content: flex-end;
      display: flex;
      span{
        margin-left: 0.5em;
        display: flex;
        border: 1px solid @line;
        width:80px;
        height:24px;
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        font-size: @font-size-p;
      }
    }
  }
}

//我的订单
.myOrder{
  overflow-x: hidden;
  &>header{
    overflow-x: scroll;
    overflow-y: hidden;
    height:50px;
    border-bottom: 1px solid @line;
    ul{
      width:180%;
      height:100%;
      background: @bg-white;
      li{
        height:96%;
        width:20%;
        align-items: center;
        justify-content: center;
        margin: 0 1em;
        span{
          font-size: @font-size-p;
        }
        &.active{
          border-bottom: 3px solid @color-main-1;
          span{
            color: @color-main-1;
          }

        }
      }
    }
  }
}

//我的订单详情
.orderDetail{
  &>header{
    padding: 0 1em;
    display: flex;
    background: @bg-white;
    height:40px;
    align-items: center;
    justify-content: space-between;
    &>span{
      span{
        font-size: @font-size-p;
      }
    }
    &>label{
      font-size: @font-size-p;
      color: @color-main-1;
    }

  }
  &>section{
    margin:1em 0;
    .orderDetailSend{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height:40px;
      padding: 0 1em;
      background: @bg-white;
      border-bottom: 1px solid @line;
      span{
        font-size: @font-size-p;
      }
    }
    .orderDetailAddress{
      padding: 0 1em;
      background: @bg-white;
      h4{
        height:40px;
        display: flex;
        flex-direction: row;
        align-items: center;
        span{

          font-size: @font-size-p;
        }
        p{
          margin-left: 2em;
          font-size: @font-size-p;
        }
      }
      &>p{
        padding:0 0 1em 0;
        font-size: @font-size-p;
        color: @font-color-gray;
      }
    }
  }
  &>article{
    background: @bg-white;
    &>header{
      padding:0 1em;
      border-bottom: 1px solid @line;
      height:40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      i{
        margin-top: 3px;
        font-size: 1.5em;
      }
      h4{
        margin-left: 5px;
        font-size: @font-size-p;
      }
    }
    &>div{
      padding: 0 1em;
      div:last-child{
        border: none;
      }
      &>div{
        padding: 1em 0;
        border-bottom: 1px solid @line;
        display: flex;
        justify-content: space-between;
        div:last-child{
          border: none;
        }
        label{
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          border: 1px solid @line;
          display: flex;
          width:66px;
          height:66px;
        }
        &>div{
          width:78%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          &>p{
            font-size: @font-size-p;
          }
          &>span{
            display: flex;
            justify-content: space-between;
            span{
              font-size: @font-size-p;
            }
            p{
              font-size: @font-size-p;
              color: @font-color-gray;
            }
          }
        }
      }
    }
  }
  &>footer{
    background: @bg-white;
    padding: 1em;
    border-top: 1px solid @line;
    margin-bottom: 54px;
    p{
      height:24px;
      align-items: center;
      justify-content: space-between;
      span{
        font-size: @font-size-p;
      }
    }
  }
  .orderDetailBtn{
    border-top: 1px solid @line;
    background: @bg-white;
    display: flex;
    width:100%;
    height:44px;
    position: fixed;
    bottom: 0;
    justify-content: flex-end;
    align-items: center;
    &>span{
      margin-right: 1em;
      border: 1px solid @line;
      display: flex;
      height:28px;
      border-radius: 14px;
      width:110px;
      align-items: center;
      justify-content: center;
      font-size: @font-size-p;
      &.active{
        border-color: @color-main-1;
        color: @color-main-1;
      }
    }
  }
}

//我的钱包
.myWallet{
  header{
    height:6.8em;
    background: @bg-white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid @line;
    p{
      color: @font-color-gray;
    }
    h3{
      font-size: @font-size-big;
      color: @color-main-1;
    };
  }
  section{
    flex-direction: row;
    display: flex;
    background: @bg-white;
    padding: 1em 0;
    a:last-child{
      border-left: 1px solid @line;
    }
    a{
      flex-direction: column;
      &>div{
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        &>.img{
          background-size: contain;
          width:50px;
          height:40px;
        }
        span{
          font-size: @font-size-p;
          padding-left: 0.5em;
        }
      }
      p{
        font-size: @font-size-p;
        justify-content: center;
        align-items: center;
      }
    }

  }
  footer{
    margin-top: 1em;
    background: @bg-white;
    &>ul{
      flex-direction: column;
      li{
        a{
          padding: 0 1em;
          height:40px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid @line;
          span{
            display: flex;
            flex-direction: row;
            align-items: center;
            p{
              margin-left: 0.5em;
              font-size: @font-size-p;
            }
            i{
              font-size: 1.4em;
            }
          }
          i{
            font-size: 1.6em;
          }
        }
      }
    }

  }
}

//我的钱包收支管理
.myPayments{
  &>ul{
    background: @bg-white;
    flex-direction: column;
    li{
      justify-content: center;
      padding: 1em;
      border-bottom: 1px solid @line;
      justify-content: space-between;
      &>div{
        h4{
          span{
            font-size: @font-size-p;
          }
        }
        p{
          span{
            color: @font-color-gray;
          }
        }
      }
      &>span{
        align-items: center;
        display: flex;
        span{
          font-size: @font-size-p;

        }
      }
    }
  }
}

//我的钱包银行卡
.myBankCard{
  &>ul{
    flex-direction: column;
    li{
      margin: 1.5em 1.5em 0 1.5em;
      background: @bg-white;
      border-radius: 10px;
      flex-direction: column;
      &>div{
        padding:1em;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        h4{
          align-items: center;
          flex-direction: row;
          display: flex;
          img{
            margin-right: 1em;
            width:30px;
            height:30px;
          }
          span{
            p{
              font-size: @font-size-p;
            }
            span{
              color: @font-color-gray;
            }
          }
        }
        &>a{
          width:auto;
          i{
            font-size: 1.4em;
          }
          span{
            font-size: @font-size-p;
          }
        }
      }
      &>p{
        align-items: center;
        justify-content: center;
        border-top: 1px solid @line;
        font-size: 1.6em;
        color: @font-color-gray;
        padding: 0.7em 0;
      }
    }
  }
  .bankCardAddBtn{
    background: @color-main-1;
    height:50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    i{
      font-size: 2em;
      color: @bg-white;
    }
    span{
      font-size: @font-size-t;
      color: @bg-white;
    }
  }
}

//
.myBankAdd{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  &>ul{
    width:100%;
    background: @bg-white;
    flex-direction: column;
    li{
      padding:1em;
      justify-content: space-between;
      border-bottom: 1px solid @line;
      p{
        font-size: @font-size-p;
      }
      input{
        font-size: @font-size-p;
        width:82%;
        color: @font-color-gray;
      }
    }
    li:last-child{
      height:46px;
      padding: 0;
      align-items: center;
      p{
        padding:0 1em;
      }
      input{
        width:58%;
      }
      a{
        border-radius: 3px;
        margin-right: 1em;
        height:80%;
        background: @color-main-1;
        color: @bg-white;
        align-items: center;
        justify-content: center;
        width:15%;
        font-size: @font-size-p;
        &.active{
          background: @line;
          color: @font-color-gray;
        }
      }
    }
  }
  &>a{

    margin-top: 20px;
    align-items: center;
    justify-content: center;
  }
}

//我的提现
.myCash{
  &>header{
    height: 6.8em;
    background: @bg-white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-bottom: 1px solid @line;
    p{
      color: @font-color-gray;
    }
    h3{
      font-size: @font-size-big;
      color: @color-main-1;
    }
  }
  &>section{
    padding:0 1em;
    display: flex;
    flex-direction: row;
    margin-top: 1em;
    height:40px;
    background: @bg-white;
    align-items: center;
    justify-content: space-between;
    p{
      font-size: @font-size-p;
    }
    input{
      font-size: @font-size-p;
      height:80%;
      width:78%;
    }
  }
  &>footer{
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .myCashCard {
    height:auto;
    .myCashCardItem{
      display: flex;
      background: @bg-white;
      width:100%;
      height:44px;
      border-top: 1px solid @line;
      align-items: center;
      justify-content: space-between;
      padding: 1em;
      div{
        align-items: center;
        display: flex;
        flex-direction: row;
        img{
          width:36px;
          height:36px;
        }
        &>span{
          margin-left: 0.5em;
          p{
            font-size: @font-size-p;
          }
          span{
            font-size: @font-size-p;
          }
        }
      }
      i{
        align-items: center;
        justify-content: center;
        z-index: 200;
        right: 0;
        transform: rotate(90deg);
        width:69px;
        height:69px;
        display: flex;
        &.active{
          transition: all .3s;
          transform: rotate(270deg);
        }
      }
    }
    &>ul{
      flex-direction: column;
      li:first-child{
        z-index: 100;
      }
      li{
        background: @bg-white;
        width:auto;
        height:44px;
        border-top: 1px solid @line;
        align-items: center;
        justify-content: space-between;
        padding: 1em;
        div{
          align-items: center;
          display: flex;
          flex-direction: row;
          img{
            width:36px;
            height:36px;
          }
          &>span{
            margin-left: 0.5em;
            p{
              font-size: @font-size-p;
            }
            span{
              font-size: @font-size-p;
            }
          }
        }
      }
    }
  }
}

//我的提现成功
.myCashSuccess{
  align-items: center;
  display: flex;
  flex-direction: column;
  height:180px;
  justify-content: space-between;
  padding-top: 5em;
  &>.img{
    width:70px;
    height:70px;
  }
  &>p{
    font-size: @font-size-t;
  }
  a{
    align-items: center;
    justify-content: center;
  }
}

//我的优惠券
.myCoupon{
  &>header{
    height:50px;
    background: @bg-white;
    border-bottom: 1px solid @line;
    &>ul{
      height:100%;
      justify-content: space-between;
      li{
        height:96%;
        margin: 0 6%;
        align-items: center;
        justify-content: center;
        width:21%;
        span{
          span{
            font-size: @font-size-p;
          }

        }
        &.active{
          border-bottom: 2px solid @color-main-1;
          span{
            color: @color-main-1;
          }
        }
      }
    }
  }
}

//我的现金券
.myCashCoupon{
  &>header{
    height:50px;
    background: @bg-white;
    border-bottom: 1px solid @line;
    ul{
      height:100%;
      li{
        align-items: center;
        justify-content: center;
        margin: 0 10%;
        height:96%;
        width:30%;
        span{
          font-size: @font-size-p;
        }
        &.active{
          border-bottom: 2px solid @color-main-1;
          span{
            color: @color-main-1;
          }
        }
      }
    }
  }
}

.footBtn{
  width:100%;
  height:50px;
  position: fixed;
  background: @color-main-1;
  bottom:0;
  display: flex;
  align-items: center;
  justify-content: center;
  div{
    i{
      font-size: 2em;
      color: @bg-white;
    }
    span{
      font-size: @font-size-t;
      color: @bg-white;
    }
  }

}
.myCashBtn{
  border-radius: 20px;
  background: @line;
  color: @font-color-gray;
  width:60%;
  height:40px;
  justify-content: center;
  align-items: center;
  font-size: @font-size-t;
  pointer-events: none;
  &.active{
    pointer-events: auto;
    background: @color-main-1;
    color: @bg-white;
  }
}